<template>
  <div class="products">
    <!-- <my-header :back="goBack" title="全部商品"></my-header> -->
    <my-tabbar :selected="tab" @change="handle">
      <mt-tabbar v-model="selected">
        <mt-tab-item id="home">
          <i class="fa-shopping-cart fa"></i>
          全部商品
        </mt-tab-item>
        <mt-tab-item id="myinfo">
          <i class="fa-home fa icon-tabbar"></i>
          我的信息
        </mt-tab-item>
        <mt-tab-item id="performance">
          <i class="fa-bar-chart fa icon-tabbar"></i>
          绩效
        </mt-tab-item>
      </mt-tabbar>
    </my-tabbar>
    <div class="saleInfo-box">
      <img src="../assets/images/title_1.jpg" alt="" class="sale">
      <img src="../assets/images/title_2.jpg" alt="" class="sale">
    </div>

    <div class="products-container">
      <my-product :link-url="'product_detail.html?productId='+item.id" :product="item"  v-for="(item,key) in products" :key="key"></my-product>
    </div>
    <!--<div class="products-container" v-if="tab === 'my'">-->
    <!--<my-product link-url="product-detail.html" v-for="(item,key) in 3" :key="key"></my-product>-->
    <!--</div>-->
    <!-- <button @click="demo">demo</button> -->
  </div>
</template>

<script>
  import MyTabbar from '@/components/Tabbar/index'
  import MyTabbarItem from '@/components/Tabbar/TabbarItem'
  import MyHeader from '@/components/Header'
  import MyProduct from '@/components/Product/index'
  import productApi from '@/api/index'
  export default {
    components: {
      MyHeader,
      MyTabbar,
      MyTabbarItem,
      MyProduct
    },
    watch: {
      selected: function (newValue) {
        if (newValue === 'home') {
          window.location.href = 'products.html'
        } else if (newValue === 'performance') {
          window.location.href = 'performance.html'
        } else if (newValue === 'myinfo') {
          window.location.href = 'my_info.html'
        }
      }
    },
    data: () => ({
      tab: 'new',
      selected: 'home',
      products: []
    }),
    methods: {
      goBack () {
        window.history.go(-1);
      },
      handle (data) {
        this.tab = data
      }
    },
    mounted () {
      this.$Central.$emit('loading', true)
      productApi.getProducts().then(res => {
        this.$Central.$emit('loading', false)
        if (res.data.code == 0) {
          this.products = res.data.data
        } else {
          window.alert('获取数据错误，错误信息：'+res.data.message)
        }
      }, err => {
        this.$Central.$emit('loading',false)
        window.alert('系统错误，获取数据失败!');
      })
    },
    name: 'Products'
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/px2rem";
  @import "../assets/css/variable";
  .split {
    font-size: 0.6rem;
    display: inline-block;
    height: px2rem($tabbar-height);
    line-height: px2rem($tabbar-height);
    color: #d5d5d5;
  }

  .sale {
    width: 100%;
    margin: 0;
  }

  .products .mint-tabbar {
    width: 100%;
    position: static !important;
    bottom: 0;
    left: 0;

  }

  .products .mint-tab-item {
    height: 1.8rem !important;
  }

  .badge-fixed {
    right: -0.24rem;
    position: absolute;
    top: -0.24rem;
    z-index: 100;
  }

  .products-container {
    background: #f5f5f5;
    width: 100%;
    float: left;
    height: auto;
    display: block;
  }

</style>
